<template>
  <li class="flex items-center justify-between mb-2 bg-white p-4 rounded-lg shadow">
    <div class="flex-1">
      <input 
        type="text" 
        v-model="todo.text" 
        @blur="emitUpdate" 
        class="border border-gray-300 p-2 w-full rounded focus:outline-none focus:ring focus:ring-blue-500"
      />
      <p class="text-gray-500 text-sm">{{ todo.startTime }} 到 {{ todo.endTime }}</p>
    </div>
    <button 
      @click="emitDelete" 
      class="ml-2 bg-red-500 text-white p-2 rounded hover:bg-red-600 transition duration-200"
    >
      删除
    </button>
  </li>
</template>

<script>
export default {
  props: {
    todo: Object,
  },
  methods: {
    emitDelete() {
      this.$emit('delete');
    },
    emitUpdate() {
      this.$emit('update', this.todo.text);
    }
  }
};
</script>

<style scoped>
/* 在此添加 TodoItem 的特定样式 */
</style>